<template>
    <div>
        <div>name: <el-input v-model="params.name"></el-input>
        </div>
        <div>description: <el-input v-model="params.description"></el-input>
        </div>
        <div>createTime: <el-input v-model="params.createTime"></el-input>
        </div>
        <div>
            <el-button type="primary" @click="search">搜索</el-button>
        </div>
    </div>
    <el-table :data="tableData">
        <el-table-column prop="name" label="角色名称"></el-table-column>
        <el-table-column prop="description" label="角色描述"></el-table-column>
    </el-table>
    <ElConfigProvider :locale="zhCn">
        <el-pagination v-model:currentPage="pageNum" v-model:page-size="pageSize" background
            layout="total, sizes, prev, pager, next ,jumper" :total="total" @size-change="pageSizeChange"
            @current-change="pageNumChange" :page-sizes="[10, 20, 50, 100]" />
    </ElConfigProvider>
</template>
<script setup lang="ts">
import { user } from "@/api";
import { useTable } from "@/hooks/useTable";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { ElConfigProvider } from "element-plus";
import { reactive } from "vue";

const params = reactive({
  name: "",
  description: "",
  createTime: "",
});

const {
  tableData,
  pageNum,
  pageSize,
  total,
  pageNumChange,
  pageSizeChange,
  search,
} = useTable(user.queryRoleListApi, params);
</script>
<style lang="less" scoped>

</style>